<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<title>Framework Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link type="text/css" rel="stylesheet" href="/latest/" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<style type="text/css">
	body {background:#eee;}
	#container {background:#fff;}
</style>
</head>
<body class="med sans-serif use-code mla">
<div id="container">
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	<hr />
	<p>Some of the simple tags. Sometimes it's great to <acronym title="laugh out loud">LOL</acronym>. <b>A bold tag</b>. <em>An emphasis tag</em>. <strong>A strong tag</strong>. <i>An italic tag</i>. Aenean id tellus condimentum leo mattis condimentum. <small>Maecenas pretium tempor neque.</small> Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Maecenas pretium tempor neque. Donec non erat lacinia nibh pretium lobortis. Sed eget ligula a turpis venenatis laoreet. Quisque eget leo sit amet risus blandit consequat.</p>
	<hr />
	<h2>Some grid stuff</h2>
	<div class="g4">
		<p>This is a paragraph in the first column Columns are pretty neat!</p>
	</div>
	<div class="g4">
		<p>This is a paragraph in the second column. I really happen to like this column, being in the middle and all.</p>
	</div>
	<div class="g4">
		<p>This is a paragraph in the third and final column</p>
	</div>
	<hr />
	<ol>
		<li>A standard list item.</li>
		<li>Another standard list item.</li>
		<li>
			A two-line list item.<br />
			This is the second line.
		</li>
		<li>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
		</li>
		<li>
			<ol>
				<li>A standard list item.</li>
				<li>
					<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
					<ol>
						<li>Item 1</li>
						<li>Item 2</li>
					</ol>
				</li>
				<li>
					A two-line list item.<br />
					The second line.
				</li>
				<li>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
				</li>
			</ol>
		</li>
	</ol>
	<p>Just an arbitrary paragraph for some separation.</p>
	<ul>
		<li>A standard list item.</li>
		<li>Another standard list item.</li>
		<li>
			A two-line list item.<br />
			This is the second line.
		</li>
		<li>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
			<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
		</li>
		<li>
			<ul>
				<li>A standard list item.</li>
				<li>
					<p>Nesting is fun, but also sometimes necessary. To include text adjacent to a nested list, it must be encapsulated in a paragraph tag or other block-level element.</p>
					<ol>
						<li>Item 1</li>
						<li>Item 2</li>
					</ol>
				</li>
				<li>
					A two-line list item.<br />
					The second line.
				</li>
				<li>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
					<p>A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item. A paragraphed list item.</p>
				</li>
				<li>
					<ul>
						<li>First</li>
						<li>Second</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
	<hr />
	<p class="sampledata">Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.</p>
	<blockquote>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id tellus condimentum leo mattis condimentum. Aenean commodo tellus in turpis. Phasellus auctor justo. Pellentesque dignissim velit vitae tellus. Quisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi fringilla mi cursus est. Etiam quis justo. Pellentesque at lectus. Morbi pharetra.
		<cite>Matt Basta</cite>
	</blockquote>
	<p>This is a paragraph right after.</p>
	<table>
		<caption>This is the form caption</caption>
		<tr>
			<th>This is a header</th>
			<th>Another</th>
		</tr>
		<tr>
			<td>Item One</td>
			<td>Something else that's useful</td>
		</tr>
		<tr>
			<td>Item Two</td>
			<td>Something else that's useful</td>
		</tr>
		<tr>
			<td>Item Three</td>
			<td>Something else that's useful</td>
		</tr>
		<tr>
			<td>Item Four</td>
			<td>Something else that's useful</td>
		</tr>
	</table>
	<p>Here is a clump of sample code-ish stuff. Make sure you have the <code>use-code</code> flag set on your body tag when you declare a page. If you don't, code will not look pretty! We make changes to spacing around <code>code</code> and <code>pre</code> elements, as well as apply nice native font families by default.</p>
<pre>
Twinkle twinkle little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle twinkle little star
How I wonder what you are
</pre>
	<p>And also, this is a code block:</p>
<code><span class="cm">// This is a comment.</span>
<span class="cs">function</span> foo(<span class="v">$bar</span>) {
	<span class="cs">echo</span> <span class="v">$bar</span>, <span class="l">" is a pretty cool guy that "</span>;
}
</code>
	<hr />
	<h2>Interface Controls</h2>
	<h3>Tabs</h3>
	<ul class="tabs">
		<li class="current"><a href="#">Selected Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">Tab</a></li><li><a href="#">A Really Really Really Really Long Tab</a></li><li><a href="#">Tab</a></li>
	</ul>
	<h3>Inline Dialogs</h3>
	<h4>Login</h4>
	<form class="login" method="post" action="">
		<strong>Login</strong>
		
		<label id="username_context" for="username">Username</label>
		<input type="text" value="" name="username"/>
		
		<label id="password_context" for="password">Password</label>
		<input type="password" value="" name="password"/>
		
		<p class="buttons">
			<input type="submit" class="submit" value="Login"/>
		</p>
	</form>
	<form class="login" method="post" action="">
		<strong>Login</strong>
		
		<p class="inliner">
			<label id="username_context" for="username">Username</label>
			<input type="text" value="" name="username" />
		</p>
		
		<p class="inliner">
			<label id="password_context" for="password">Password</label>
			<input type="password" value="" name="password" />
		</p>
		
		<p class="buttons">
			<input type="submit" class="submit" value="Login"/>
		</p>
	</form>
	<h4>Warning</h4>
	<h5>Form Style</h5>
	<form class="warning_box" method="post" action="">
		<strong>Warning!</strong>
		<p>By clicking "Delete" you will permananently deleting the entry <tt>Blueprint CSS</tt>.</p>
		<label>
			<input type="checkbox" class="checkbox" value="sure" name="sure" />
			<span>I am sure I wish to do this.</span>
			<small>This action cannot be un-done.</small>
		</label>
		<p class="buttons">
			<input type="submit" value="Delete" class="submit" name="submit" /><input type="submit" value="Cancel" class="submit" name="cancel" />
		</p>
	</form>
	
	<h5>Message Style</h5>
	<div class="warning_box">
		<strong>Warning!</strong>
		<p>Changes that are made on this page may affect other users of the system. To ensure that you do not disrupt the system's stability or the workflow of another user, make sure that you create a restore snapshot before continuing.</p>
		<p>As an extra layer of protection, it would be a good idea to create a full system backup.</p>
	</div>
	
	<h4>Notification</h4>
	<div class="notice_box">
		<strong>Notice</strong>
		<p>The system is currently performing maintenance. Some operations may take longer than they otherwise would.</p>
		<p>Thank you for your patience.</p>
	</div>
	
	<h4>Success</h4>
	<div class="success_box">
		<strong>Completed Successfully</strong>
		<p>The system maintenance operation has completed successfully. Thank you for your patience. All system functionality has been restored to normal.</p>
	</div>
	
	<hr />
	<h2>Form Test</h2>
	<h3>Standard Elements</h3>
	<form action="#" method="get">
		<label for="text1">Textbox</label>
		<input type="text" value="" name="text1" />
		<small>This is a textbox.</small>
		
		<div class="radiogroup">
			<label for="radio1">Radio Buttons</label>
			<label><input class="radio" type="radio" value="r1" name="radio1" /> <span>Option 1</span></label>
			<label><input class="radio" type="radio" value="r2" name="radio1" /> <span>Option 2</span></label>
			<label><input class="radio" type="radio" value="r3" name="radio1" /> <span>Option 3</span></label>
			<label><input class="radio" type="radio" value="r4" name="radio1" /> <span>Option 4</span></label>
			<label><input class="radio" type="radio" value="r5" name="radio1" /> <span>Option 5</span></label>
		</div>
		
		<label for="dropdown1">Dropdown</label>
		<select name="dropdown1">
			<option>Value</option>
			<option>Value</option>
			<option>Value</option>
			<option>Value</option>
			<option>Value</option>
		</select>
		<small>This is a dropdown.</small>
		
		<div class="checkgroup">
			<label>
				<input type="checkbox" class="checkbox" value="c1" name="check1" />
				<span>Check 1</span>
				<small>This is a checkbox.</small>
			</label>
			<label>
				<input type="checkbox" class="checkbox" value="c2" name="check2" />
				<span>Check 2</span>
				<small>Sometimes you need explanations for each one.</small>
			</label>
			<label><input type="checkbox" class="checkbox" value="c3" name="check3" /> <span>Check 3</span></label>
			<label><input type="checkbox" class="checkbox" value="c4" name="check4" /> <span>Check 4</span></label>
			<label><input type="checkbox" class="checkbox" value="c5" name="check5" /> <span>Check 5</span></label>
			<label><input type="checkbox" class="checkbox" value="c6" name="check6" /> <span>Check 6</span></label>
		</div>
		
	</form>
	
	<h3>Custom Layouts</h3>
	<form action="#" method="get">
		
		<p class="inliner">
			<label for="horiz_textbox">Horizontal Textbox</label>
			<input type="text" name="horiz_textbox" />
		</p>
		
		<p class="inliner">
			<label for="horiz_search">Search</label>
			<input type="text" name="horiz_search" />
			<label>
				<span class="hidden">Search Type</span>
				<select name="horiz_search_type">
					<option value="web">Web</option>
					<option value="images">Images</option>
					<option value="video">Video</option>
				</select>
			</label>
		</p>
		
		<p class="buttons">
			<input type="submit" value="Submit" class="submit" /><button onclick="alert('You clicked me!');">Action Button</button>
		</p>
		
	</form>
	
	
	<h3>Custom Elements</h3>
	<form action="#" method="get">
		
		<label for="money1">Dollar</label>
		<p class="money">
			<span>
				<span>$</span>
				<input type="text" value="" name="money1" />
			</span>
		</p>
		
		<hr />
		
		<label for="money2">Euro</label>
		<p class="money">
			<span>
				<span>&euro;</span>
				<input type="text" value="" name="money2" />
			</span>
		</p>
		
		<label for="unit1">Meters</label>
		<p class="unit">
			<span>
				<input type="text" value="" name="unit1" />
				<span>meters</span>
			</span>
		</p>
		
		<fieldset>
			<legend>Fieldset</legend>
			
			<label for="text2">Textbox</label>
			<input type="text" value="" name="text2" />
			<small>This is an explanation in a fieldset</small>
			
			<label for="text3">Textbox</label>
			<input type="text" value="" name="text3" />
			
			<hr />
			
			<label for="dropdown2">Dropdown</label>
			<select name="dropdown2">
				<option>Value</option>
				<option>Value</option>
				<option>Value</option>
				<option>Value</option>
				<option>Value</option>
			</select>
			
		</fieldset>
		
		<p class="upload">
			<label for="file1">File Upload</label>
			<input type="file" name="file1" />
			<small>Choose a file from your desktop.</small>
			<span>Note: Do not upload files to locations that you do not trust.</span>
		</p>
		
		<div class="buttons">
			<input type="submit" value="Submit" class="submit" />
		</div>
	</form>
	<div class="clear">&nbsp;</div>
</div>
</body>
</html>